<template>
  <div class="icons">
    <div class="list">
      <div class="item" :key="el.type" v-for="(el,index) in iconsList" @click="onChange(el.type,index)">
        <div class="item-icon">
          <img :src="el.status?el.urls:el.url"/>
        </div>
        <div class="item-name" :class="[icon === el.type && 'item-name--selected']">
          {{ el.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getMarkIconUrl} from '@/utils/utils';

export default {
  name: 'location-icon-picker',
  data() {
    return {
      currentPos: 0,
      icon: 'default',
      iconsList: [
        {
          type: '1',
          status: true,
          url: getMarkIconUrl('default'),
          urls: getMarkIconUrl('default_s'),
          name: '默认',
        },
        {
          type: '2', status: false,
          url: getMarkIconUrl('2'),
          urls: getMarkIconUrl('2_s'),
          name: '餐饮',
        },
        {
          type: '3', status: false,
          url: getMarkIconUrl('3'),
          urls: getMarkIconUrl('3_s'),
          name: '住宿',
        },
        {
          type: '4', status: false,
          url: getMarkIconUrl('4'),
          urls: getMarkIconUrl('4_s'),
          name: '购物',
        },
        {
          type: '5', status: false,
          url: getMarkIconUrl('5'),
          urls: getMarkIconUrl('5_s'),
          name: '4S店',
        },
        {
          type: '6', status: false,
          url: getMarkIconUrl('6'),
          urls: getMarkIconUrl('6_s'),
          name: '金融',
        },
        {
          type: '7', status: false,
          url: getMarkIconUrl('7'),
          urls: getMarkIconUrl('7_s'),
          name: '教育',
        },
        {
          type: '8', status: false,
          url: getMarkIconUrl('8'),
          urls: getMarkIconUrl('8_s'),
          name: '卫生',
        },
        {
          type: '9', status: false,
          url: getMarkIconUrl('9'),
          urls: getMarkIconUrl('9_s'),
          name: '休闲',
        },
        {
          type: '10', status: false,
          url: getMarkIconUrl('10'),
          urls: getMarkIconUrl('10_s'),
          name: '机关',
        },
        {
          type: '11', status: false,
          url: getMarkIconUrl('11'),
          urls: getMarkIconUrl('11_s'),
          name: '商业',
        },
        {
          type: '12', status: false,
          url: getMarkIconUrl('12'),
          urls: getMarkIconUrl('12_s'),
          name: '服务',
        },
        {
          type: '13', status: false,
          url: getMarkIconUrl('13'),
          urls: getMarkIconUrl('13_s'),
          name: '公司',
        },
        {
          type: '14', status: false,
          url: getMarkIconUrl('14'),
          urls: getMarkIconUrl('14_s'),
          name: '交通',
        },
        {
          type: '15', status: false,
          url: getMarkIconUrl('15'),
          urls: getMarkIconUrl('15_s'),
          name: '科研',
        },
        {
          type: '16', status: false,
          url: getMarkIconUrl('16'),
          urls: getMarkIconUrl('16_s'),
          name: '农业',
        },
        {
          type: '17', status: false,
          url: getMarkIconUrl('17'),
          urls: getMarkIconUrl('17_s'),
          name: '地名',
        },
        {
          type: '18', status: false,
          url: getMarkIconUrl('18'),
          urls: getMarkIconUrl('18_s'),
          name: '设施',
        },
      ],
    };
  },
  mounted() {
    console.table(this.iconsList)
    this.icon = this.value;
  },
  methods: {
    onChange(type, index) {
      this.iconsList[this.currentPos].status = false
      this.currentPos = index
      this.iconsList[this.currentPos].status = true
      this.icon = type;
      this.$emit('input', type);
    },
  },
  watch: {
    value:{
      handler(val)  {
        this.icon = val;
        this.iconsList.forEach(item => {
          if(item.type === val) {
            item.status = true
          } else {
            item.status = false
          }
        });
      },
      immediate: true
    }
  },
  props: {
    value: {
      type: String,
      default: 'default',
    },
  },
}
</script>
<style lang="scss" scoped>
.icons {
  padding: 18px;
  margin-bottom: 20px;
  border: 1px solid rgba(98, 183, 255, 0.3);
}

.list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1;
}

.item {
  cursor: pointer;
  padding: 10px 9px;

  &-icon {
    height: 18px;
    margin-bottom: 3px;
    >img {

      max-height: 100%;
    }
  }

  &-name {
    // margin-top: 5px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    // line-height: 16px;
    // &--selected {
    //   color: #1ee3f3;
    // }
  }
}
</style>